<template>
  <div style="min-width: 300px;width: 100%;">
    <!-- <el-row class="device-item"> -->
    <!-- <el-col :span="12">
        <el-button type="primary" v-if="bindEnable" @click="handleBind">{{$t('device.BindUser')}}</el-button>
      </el-col> -->
    <!-- <el-col :span="12" style="text-align:right;"> -->
    <!-- <span>{{ modes[device.mode] }}</span> -->
    <!-- <el-form inline>
        <el-form-item :label="$t('Mode')">
          <el-select v-model="device.mode" style="width:100px;" @change="handleChangeMode">
            <el-option v-for="(mode,index) in modes" :key="'device_mode_'+index" :label="mode" :value="index" />
          </el-select>
        </el-form-item>
      </el-form> -->
    <!-- </el-col> -->
    <!-- </el-row> -->
    <el-row :gutter="10" class="locker-card" v-for="(row,index) in storages" :key="'row_'+index">
      <el-col v-for="(col,ci) in row" :key="'storage_'+ci" :span="12">
        <storage-card :value="col" :device="device" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import deviceAPI from '@/api/device/device.js'
  import deviceChildAPI from '@/api/device/device-child.js'
  import devicePermissionAPI from '@/api/device/permission.js'
  import StorageCard from './locker/StorageCard.vue'
  import BaseController from './BaseController'
  import {
    createMatrix,
    matrixForEach,
    listToMap
  } from '@/utils/index.js'

  export default {
    name: 'LockerController',
    mixins: [BaseController],
    components: {
      StorageCard
    },
    data() {
      return {
        modes: [this.$t('Public'), this.$t('User'), this.$t('Anyone'), this.$t('Mix')],
        children: [],
        permissions: [],
        childrenMap: {}, //子单元
        storages: []
      }
    },
    watch: {
      device(nv, ov) {
        if (nv.id === ov.id) {
          return
        }
        this.loadData()
      }
    },
    computed: {
      bindEnable() {
        const {
          mode
        } = this.device
        return mode === 0 || mode === 3
      }
    },
    methods: {
      loadData() {
        if (this.device.id === undefined) {
          return
        }
        // this.setDoor()
        this.loadChilren()
      },
      setItemDevice(data) {
        const {
          state,
          online,
        } = data
        this.device = Object.assign({}, this.device, {
          state,
          online
        })
      },
      //   const map = listToMap(children, 'index')
      //   const {
      //     list,
      //     column
      //   } = this
      //   matrixForEach(list, column, (item) => {
      //     const child = map[item.index]
      //     if (child !== undefined) {
      //       item.opened = child.opened
      //       item.used = child.exists
      //     }
      //   })
      // },
      // setDoor() {
      //   const {
      //     model,
      //     mode,
      //   } = this.device
      //   let direction_row = true
      //   if (model === 1) {
      //     this.column = 1
      //   } else if (model === 2) {
      //     direction_row = false
      //   }
      //   this.list = [].concat(createMatrix(this.row, this.column, direction_row, {
      //     deviceId: this.device.id,
      //     opened: false,
      //     mode: mode === undefined ? 0 : mode,
      //     used: false,
      //     key: null
      //   }))
      // },
      setLockerMatrix(total, isRow, rowCount) {
        const list = this.children
        const min = list.length > total ? total : list.length
        const columnCount = min / rowCount
        this.storages = []
        for (var rowIndex = 0; rowIndex < rowCount; rowIndex++) {
          const row = []
          for (var columnIndex = 0; columnIndex < columnCount; columnIndex++) {
            const storeageIndex = isRow ? rowIndex * columnCount + columnIndex : columnIndex * rowCount + rowIndex
            const each = list[storeageIndex];
            row.push(each)
          }
          this.storages.push(row)
        }
      },
      loadChilren() {
        const vm = this
        deviceChildAPI.list({
          deviceId: this.device.id
        }).then(res => {
          vm.children = [].concat(res.data)
          vm.childrenMap = listToMap(res.data, 'index')
          vm.loadPermission()
        })
      },
      loadPermission() {
        const vm = this
        devicePermissionAPI.children({
          deviceId: this.device.id
        }).then(res => {
          vm.permissions = [].concat(res.data)
          vm.setStoragePermission()
          const {
            childrenSize,
            subQuantity,
            subType
          } = vm.device
          vm.setLockerMatrix(childrenSize, subType, subQuantity)
        })
      },
      setStoragePermission() {
        const list = this.permissions
        const map = this.childrenMap
        for (var i = 0; i < list.length; i++) {
          const each = list[i]
          const storage = map[each.deviceIndex]
          if (storage === undefined || storage === null) {
            continue
          }
          storage.permission = each
          storage.used = true
          storage.key = each.key
        }
      },
      // handleChangeMode() {
      //   const vm = this
      //   const {
      //     mode
      //   } = this.device
      //   deviceAPI.update(this.device).then(data => {
      //     vm.list.forEach(item => {
      //       item.forEach(each => {
      //         each.mode = mode === 3 ? each.mode : mode
      //       })
      //     })
      //   })
      // }
    }
  }

</script>

<style>
  .primary-button {
    color: #007aff;
  }

  .device-item {
    display: flex;
    flex-direction: row;
  }

  .item-content {
    flex-basis: 200;
    flex-grow: 1;
  }

  .item-type {
    flex-basis: 150;
    flex-grow: 0;
    /* flex-shrink: 1; */
  }

  .locker-card {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 3px;
  }

  .storagge-card {
    width: 160px;
    height: 86px;
  }

</style>
